<template>
  <div class="search">
    <el-autocomplete
      :trigger-on-focus="false"
      clearable
      placeholder="请你输入医院名称"
      v-model="keyword"
      :fetch-suggestions="querySearchAsync"
      @select="handleSelect"
    />
    <el-button type="primary" size="default" :icon="Search">搜索</el-button>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
import {useRouter} from 'vue-router'
import {reqHospitalInfo} from '@/api/home/index'
import {Search} from '@element-plus/icons-vue'
let keyword = ref<string>('')
let $router = useRouter()
  const querySearchAsync = async (keyword: string, cb: (arg: any) => void) => {
    let res = await reqHospitalInfo(keyword)
   let results = res.data.map((item:any)=>{
      return {
        value: item.hosname, //展示的医院的名字
        hoscode: item.hoscode, //存储医院的编码
      }
    })
    cb(results)
  }
  // 去医院详情
  const handleSelect = (item:any)=>{
    $router.push({path:'/hospital',query:{hoscode:item.hoscode}})
  }
</script>
<style scoped lang="scss">
.search {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0px;

  ::v-deep(.el-input__wrapper) {
    width: 600px;
    margin-right: 10px;
  }
}
</style>
